<!-- 用户读后感列表 -->
<template>
    <div class="my-review" ref="my-review" @scroll="scrollLoad"> 
        <div class="list-body">
            <div class="time-axis">
                <ul class="day-list">
                    <li class="shadow3" v-for="(list,index) in reviewList" :key="index">
                        <div class="day" v-show="list.dateShow">
                            <span>{{list.date}}</span>
                            <i>{{list.month}}月</i>
                        </div>
                        <h4 @click="goReview(list)">关于《{{list.bookName}}》的读后感</h4>
                        <p @click="goReview(list)">{{list.experienceContent}}</p>
                        <div class="review-page clearfix">
                            <span class="left">{{list.pageInterval}}</span>
                            <div :class="['like right',{'islike':list.isPraise}]" @click="likeClick(list,index)">{{list.praiseCount}}</div>
                        </div>
                    </li>
                </ul> 
                <transition name='fade'>
                    <div class="no-con" v-show="noConShow">
                        <img src="@/assets/img/no-con.png" alt="">
                        <p>暂无书评...</p>
                    </div>
                </transition> 
                <div class="bottom-tips">{{bottomTip}}</div>   
            </div>
        </div>
    </div>
</template>

<script>
import { alertMask } from '@/assets/js/base'
import { axGet } from '@/api/index'

export default {
    name: "reviewList",
    data(){
        return{
            myUserid:this.$parent.myInfo.UserId,  //用户
            userid:this.$route.query.userid,      //书评用户
            reviewList:[],      //书评列表
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'',
            isLoading:true,
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.getMyReview(1)
        }
    },
    mounted(){
    },
    methods:{
        goReview(list){
            sessionStorage.setItem("thisReview",JSON.stringify(list))
            this.$router.push({path:'/review',query: {bookid:list.bookId,reviewid:list.experienceId}});
        },
        // 数据组装
        addData(listJson){
            // console.log(listJson)
            listJson.forEach((item,i)=>{
                item.Date=item.createTime.substring(0,10)
                let month=0
                let date=0
                if(item.Date.charAt(5)==0){
                    month=item.Date.substring(6,7)
                }else{
                    month=item.Date.substring(5,7)
                }
                if(item.Date.charAt(8)==0){
                    date=item.Date.substring(9,10)
                }else{
                    date=item.Date.substring(8,10)
                }
                item.month=month;
                item.date=date;
                item.voiceOn=false;
                item.dateShow=true;
                this.reviewList.push(item)
            })
            for(let i=0;i<this.reviewList.length;i++){
                if(i+1<this.reviewList.length){
                    if(this.reviewList[i].Date==this.reviewList[i+1].Date){
                        this.reviewList[i+1].dateShow=false;
                    }
                }else if(this.reviewList.length>1){
                    if(this.reviewList[this.reviewList.length-1].Date==this.reviewList[this.reviewList.length-2].Date){
                        this.reviewList[this.reviewList.length-1].dateShow=false;
                    } 
                }
            }
        },
        //我的书评列表请求
        getMyReview(page){
            axGet('GetPersonalExperienceList', {
                who:this.userid,
                userId: this.myUserid,
                PageIndex: page,
                PageSize:10,
            }).then(res => {
                if(res.ResultCode==1){
                    let listJson=res.Value.list
                    this.addData(listJson)
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.reviewList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        // 点赞
        likeClick(item){
            if(item.isPraise){
                this.removePraised(item)
            }else{
                this.addPraised(item)
            }
        },
        addPraised(item){
            axGet('PostPraise', {
                FromUserId: this.myUserid,
                ToUserId:item.userId,
                PraiseCategory:0,
                PraiseIdentity:item.experienceId, 
            }).then(res => {
                if(res.ResultCode==1){
                    item.isPraise=true;
                    item.praiseCount=parseInt(item.praiseCount)+1; 
                }
            })
        },
        removePraised(item){//取消赞
            axGet('CancelPraise', {
                FromUserId: this.myUserid,
                ToUserId:item.userId,
                PraiseCategory:0,
                PraiseIdentity:item.experienceId, 
            }).then(res => {
                if(res.ResultCode==1){
                    item.isPraise=false;
                    item.praiseCount=parseInt(item.praiseCount)-1; 
                }
            })
        },
        // 滚动加载   
        scrollLoad(){
            let bodyH = this.$refs['my-review'].clientHeight;
            let scrollH = this.$refs['my-review'].scrollTop;
            let listH = this.$refs['my-review'].scrollHeight;
            console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getMyReview(page)
                }else{
                    if(this.reviewList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    }
                    
                }
                
            }
            
        },
        
    }
}
</script>
<style type="text/css" scoped>
.my-review{
    min-height: 100%;
}
.list-body{
    background: #fff;
    border-radius: 0.44rem 0.44rem 0 0;
    padding: 0.48rem 0.42rem 0 0.32rem; 
}

</style>